<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link href="css/style.css" type="text/css" rel="stylesheet" />
		<script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
	
		<script type="text/javascript">
			//演示动画效果: show() 和 hide() 方法中传入毫秒数以达到动画的效果
			/*
			$(function(){ 
				$(".head").toggle(function(){
					$(".content").show(1000);
				}, function(){
					$(".content").hide(1000);
				});
			})
			*/
			
			//只改变高度
			/*
			$(function(){ 
				$(".head").toggle(function(){
					$(".content").slideDown(500);
				}, function(){
					$(".content").slideUp(500);
				});
			})
			*/
			
			//只改变透明度
			/*
			$(function(){ 
				$(".head").toggle(function(){
					$(".content").fadeIn(1000);
				}, function(){
					$(".content").fadeOut(1000);
				});
			})
			*/
			
			//toggle() 可以切换元素的可见状态. 
			//slideToggle(): 通过高度变化来切换匹配元素的可见性
			//fadeToggle(): 通过透明度来切换元素的可见性.
			//fadeTo(): 把不透明度以渐近的方式调整到指定的值 (0 – 1 之间). 
			$(function(){ 
				$(".content").show();
				var i = 1; 
				
				$(".head").click(function(){
					//$(".content").toggle();
					//$(".content").slideToggle();
					//$(".content").fadeToggle();
					
					$(".content").fadeTo("slow", i);
					i = i - 0.1;
				});
			})
		</script>
	
	</head>
	<body>
		<div id="panel">
			<h5 class="head">什么是jQuery?</h5>
			<div class="content">
				jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
			</div>
		</div>
	</body>

</html>
